<template>
  <div class="drinkList" v-show="curPageShow">
    <div class="title ainimated zoomIn">
        <div class="l ainimated flash">
            <img src="../assets/img/dot_lt.png" alt="">
            <img src="../assets/img/dot_lb.png" alt="">
        </div>
        <div class="m">
            <img src="../assets/img/select_text.png" alt="">
        </div>
        <div class="r ainimated flash">
            <img src="../assets/img/dot_rt.png" alt="">
            <img src="../assets/img/dot_rb.png" alt="">
        </div>
    </div>

    <!-- 饮料图片可以点击进入制作 rubberBands-->
    <ul class="list_item">
        <li  
            v-for="(drink,key,index) in drinkList"
            :key="key">

            <img class="animited tada" 
                :style="{'animation-delay':(index/2) +'s'}"
                @click="selectDrink(key)" 
                :src="drink.imgSrc" alt="">
            <img class="item_text" :src="drink.titleSrc" alt="">
        </li>
    </ul>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import preLoadImg from '../mixins/preloadImg.js'
    export default {
        name:'drinkList',
         mixins:[preLoadImg],
        data(){
            return{
  
            }
        },
        computed:{
            ...mapGetters(['drinkList'])
        },
        methods:{
            selectDrink(name){
                this.$store.dispatch('switchDrink',name)
                this.$store.dispatch('switchPage','introduce')

                let _drinkSelect='';
                switch (name) {
                    case 'drink1':
                        _drinkSelect='小清新渐变冰拿铁';
                        break;
                    case 'drink2':
                        _drinkSelect='二次元旋风';
                        break;
                    case 'drink3':
                        _drinkSelect='MIX炫冰乐';
                        break;
                    case 'drink4':
                        _drinkSelect='少女心鸡尾酒';
                        break;
                }

                _hmt.push(['_trackEvent', '选择饮料', 'click', _drinkSelect])
            }
        },
        mounted(){
            this.preLoadImg()
        }
    }
</script>

<style lang="scss">
    .drinkList{
        position: relative;
        width: 100%;
        height: 100%;
        background: url('../assets/img/select_bg.jpg') no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;

        .title{
            $width:60%;
            position: absolute;
            top:23%;
            left:50%;
            margin-left:-$width/2;
            margin-top:-20px;
            width: $width;
            height: 40px; 
            display: flex;
            animation-iteration-count: 1;
            animation-duration:2s;
            animation-delay:1s;


            .l,.r{
                display: flex;
                flex-direction: column;
                animation-iteration-count:2;
                animation-duration:2s;
                animation-delay:2s;

            }
            img{
                width:100%;
                height:100%;
            }
            .l>img,.r>img{height:40%;}
        }

        .list_item{
            position:absolute;
            bottom:8%;
            padding:5px;
            width:100%;
            height:70%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;

            li{
                position: relative;
                list-style: none;
                width:50%;
                height:50%;
                text-align: center;
                padding:25px;
                img{
                    animation-iteration-count: infinite;
                    animation-duration:2s;
                    height:100%;
                }
                .item_text{
                    position: absolute;
                    bottom:0;
                    left:10%;
                    width:80%;
                    height:auto;
                }
            }
        }
    }
</style>


